<eb-wizard-component wizard-title="{{ 'ADMINCONSOLE.RESET_PASSWORD.TOOLBAR.TITLE' | translate }}">

    <eb-wizard-content>

        <div ng-if="vm.step === 1">
            <div layout="column" layout-padding>
                <div>
                    <p>{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.TEXT1' | translate }}</p>
                    <ul>
                        <li>{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.STEP1' | translate }}</li>
                        <li>{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.STEP2' | translate }}</li>
                        <li>{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.STEP3' | translate }}</li>
                    </ul>
                    <p>{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.TEXT2' | translate }}</p>
                </div>
            </div>

            <div layout="row"
                 layout-align="end center"
                 layout-xs="column"
                 layout-align-xs="center center"
                 style="padding-right: 16px;">
                <md-button class="md-raised md-secondary" type="button" ng-click="vm.cancel()" >{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.ACTION.CANCEL' | translate }}</md-button>
                <md-button class="md-raised md-primary md-accent" type="button" ng-click="vm.startReset()" >{{ 'ADMINCONSOLE.RESET_PASSWORD.REQUEST.ACTION.INITIATE' | translate }}</md-button>
            </div>
        </div>

        <!-- WAITING FOR DISCONNECT / REBOOT-->
        <div ng-if="vm.step === 2">
            <div layout="column" layout-align="center center" layout-padding>
                <div>
                    <img src="/img/unplug.gif"/>
                </div>
                <div>
                    <p>
                        <span style="font-weight: bold;">{{ 'ADMINCONSOLE.RESET_PASSWORD.SHUTDOWN.TEXT' | translate }}</span>
                    </p>
                    <p>
                        <span>{{ 'ADMINCONSOLE.RESET_PASSWORD.SHUTDOWN.EXPLAIN' | translate }}</span>
                    </p>
                </div>
                <div layout="row" layout-xs="column" layout-align="center center">
                    <span style="font-weight: 500;">{{ 'ADMINCONSOLE.RESET_PASSWORD.SHUTDOWN.WAITING_TITLE' | translate }} &ndash; {{vm.shutdownTimer}}</span>
                    <div style="padding-left: 16px;">
                        <md-progress-circular md-diameter="32" md-mode="indeterminate"></md-progress-circular>
                    </div>
                </div>
            </div>

            <div layout="row"
                 layout-align="end center"
                 layout-xs="column"
                 layout-align-xs="center center"
                 style="padding-right: 16px;">
                <md-button class="md-raised md-secondary" type="button" ng-click="vm.cancel()">{{ 'ADMINCONSOLE.RESET_PASSWORD.SHUTDOWN.ACTION.CANCEL' | translate }}</md-button>
            </div>
        </div>

        <!--  CONFIRM -->
        <div ng-if="vm.step === 3;">
            <div layout="column" layout-align="center center" layout-padding>
                <div>
                    <p>{{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.TEXT1' | translate }}</p>
                    <p>
                        {{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.TEXT2_PRE' | translate }}
                        <b>{{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.TEXT2_HIGHLIGHT' | translate }}</b>
                        {{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.TEXT2_POST' | translate }}
                    </p>
                </div>
            </div>

            <div layout="row"
                 layout-align="end center"
                 layout-xs="column"
                 layout-align-xs="center center"
                 style="padding-right: 16px;">
                <md-button class="md-raised md-secondary" type="button" ng-click="vm.cancel()" >{{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.ACTION.NO_RESET' | translate }}</md-button>
                <md-button class="md-raised md-primary md-accent" type="button" ng-click="vm.executeReset()" >{{ 'ADMINCONSOLE.RESET_PASSWORD.CONFIRM.ACTION.DO_RESET' | translate }}</md-button>
            </div>
        </div>


        <!--  FAILURE -->
        <div ng-if="vm.step === 0;">
            <div layout="column" layout-align="center center" layout-padding>
                <div>
                    <h4>{{ 'ADMINCONSOLE.RESET_PASSWORD.FAILURE.TITLE' | translate }}</h4>
                </div>
                <div>
                    <p>{{ 'ADMINCONSOLE.RESET_PASSWORD.FAILURE.ERROR.' + vm.failureReason | translate }}</p>
                    <p ng-show="vm.failureReason === 'UNEXPECTED'">{{ vm.unexpectedError }}</p>
                    <p>{{ 'ADMINCONSOLE.RESET_PASSWORD.FAILURE.TEXT' | translate }}</p>
                </div>
            </div>

            <div layout="row"
                 layout-align="end center"
                 layout-xs="column"
                 layout-align-xs="center center"
                 style="padding-right: 16px;">
                <md-button class="md-raised md-secondary" type="button" ng-click="vm.cancel()" >{{ 'ADMINCONSOLE.RESET_PASSWORD.FAILURE.ACTION.OK' | translate }}</md-button>
            </div>
        </div>

    </eb-wizard-content>

</eb-wizard-component>


